import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import NavigationUtil from '../navigator/NavigationUtil'

class HotPage extends React.Component{
  constructor(props){
    super(props);
    this.topTabNames =  ['喜剧', '灾难', '剧情', '恐怖', '战争', '爱情', '科幻', '纪录片']
  }
  _topTabNavigator(){
    const topTabs={};
    this.topTabNames.forEach((item, index)=>{
      topTabs['topTab'+index]={
        // 使用以下方法，为tab下的页面传入参数
        screen: props => <HotTab {...props} tabLabel={item}/>,
        navigationOptions:{
          title: item,

        }
      }
    })
    if(!this.tabNavigator){
      this.tabNavigator = createAppContainer(createMaterialTopTabNavigator(topTabs,{
        tabBarOptions:{
          tabStyle: styles.tabStyle, //标签框属性
          upperCaseLabel: false, // 是否使用标签大写
          scrollEnabled: true, // 是否支持选项卡滚动
          style:{
            backgroundColor: '#476'
          },
          indicatorStyle: styles.indicatorStyle, // 标签指示器样式
          labelStyle: styles.labelStyle, // 文字的样式
        }
      }));
    }
    return this.tabNavigator;
  }
  render(){
    const TopTabNavigator = this._topTabNavigator();
    return (
      <View style={styles.topTabView}>
        <TopTabNavigator />
      </View>
    )
  }
};

class HotTab extends React.Component{
  render(){
    const {tabLabel} = this.props;
    return (
      <View style={styles.container}>
          <Text style={styles.welcome}>{tabLabel}</Text>
          <Text onPress={()=>{
            NavigationUtil.movePage({navigation: this.props.navigation},'DetailPage')
          }}>跳转到详情页</Text>
      </View>
    );
  }
};


const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome:{
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    topTabView:{
      flex:1
    },
    tabStyle:{
      width: 80,
      minWidth: 80,
      // height: 40
    },
    indicatorStyle:{
      height: 2,
      backgroundColor:'#F5FCFF'
    },
    labelStyle:{
      fontSize: 13,
    }
});

export default HotPage;
